<template>
  <div>
    <canvas id="canvas" ref="canvasRef" width="300" height="300" />
    {{ state.toSvg }}
  </div>
</template>
<script lang="ts" setup>
import { fabric } from "fabric"
import { json } from "../staticData/index"
import { ref, reactive, nextTick, onMounted } from "vue"
const canvasRef = ref<any>(null)
const state = reactive({
  canvasOptions: {
    width: 500,
    height: 300,
    backgroundColor: "#fc0",
    selectionDashArray: [5, 5],
    selectionColor: "rgba(0,255,0,0.3)",
    selectionBorderColor: "red",
    selectionLineWidth: 5,
    perPixelTargetFind: false,
    isDrawingMode: false,
    hasControls: true
  },
  canvasOptionsJson: "",
  urlJson: "",
  toSvg: "",
  json
})
const initCanvas = (canvasOptions = state.canvasOptions) => {
  canvasRef.value = new fabric.Canvas("canvas", canvasOptions)
  const circle = new fabric.Circle({
    radius: 30,
    fill: "#f55",
    top: 100,
    left: 100
  })
  canvasRef.value.add(circle)
  // canvasRef.value.selectionColor = "rgba(0,255,0,0.3)"
  // canvasRef.value.selectionBorderColor = "red"
  // canvasRef.value.selectionLineWidth = 5
}
onMounted(() => {
  nextTick(() => {
    initCanvas()
  })
})
</script>
